<template>
  <div class="page">
    <div class="main">
      <el-card class="box-card" style="height:800px">
        <div slot="header" class="clearfix">
          <span>
            <navigation />
           
          </span>
        </div>
        <!-- <div class="list" id="taskScore"> -->
           <b style="margin-left:10px;font-size:14px;position: relative;top: -10px;">{{$route.query.name}}</b>
          <el-scrollbar class="page-component__scroll" style="height:100%">
            <div style="height:630px;">
              <el-table
                border
                :data="tableData"
                style="width: 100%"
                height="620px"
                :header-cell-style="{ background: '#f5f5f5' }"
                size="small"
              >
               <el-table-column
                  align="center"
                  prop="index"
                  width="80"
                  label="序号"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="subtasksName"
                  label="目标任务详情"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="departmentName"
                  label="目标配合单位"
                ></el-table-column>
                <el-table-column align="center" label="一季度任务量">
                  <template slot-scope="scope">{{
                    embellishDate(scope.row.oneQuarterNumber)
                  }}</template>
                </el-table-column>
                <el-table-column align="center" label="二季度任务量">
                  <template slot-scope="scope">{{
                    embellishDate(scope.row.twoQuarterNumber)
                  }}</template>
                </el-table-column>
                <el-table-column align="center" label="三季度任务量">
                  <template slot-scope="scope">{{
                    embellishDate(scope.row.threeQuarterNumber)
                  }}</template>
                </el-table-column>
                <el-table-column align="center" label="全年任务量">
                  <template slot-scope="scope">{{
                    embellishDate(scope.row.allNumber)
                  }}</template>
                </el-table-column>
              </el-table>
            </div>
          </el-scrollbar>
          <el-pagination
            background
            style="float:right"
            layout="prev, pager, next"
            :page-size="pageSize"
            :current-page="pageNum"
            :total="total"
            @current-change="pageChange"
          >
          </el-pagination>

        <!-- </div> -->
      </el-card>
    </div>

    <!-- 弹出备注输入框 -->
    <el-dialog title="备注" :visible.sync="dialogVisible" width="30%" center>
      <el-input
        type="textarea"
        :rows="8"
        placeholder="请输入内容"
        v-model="textarea"
      >
      </el-input>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      dialogVisible: false,
      dialogGrade: false,
      options: [],
      value: "",
      value1: true,
      input: "",
      tableData: [],
      total: 0,
      multipleSelection: [],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      textarea: "",
      objCurr: {
        type: true,
        id: "",
        taskId: "",
        year: "",
        time: "",
        score: ""
      },
      quarterList: [1, 2, 3, 4],
      input2: "",
      taskId: ""
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getListByPage();
  },
  // 计算属性
  computed: {
    a1() {
      if (this.objCurr.type == true) {
        this.quarterList = [1, 2, 3, 4];
      } else {
        this.quarterList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
      }
      return this.quarterList;
    }
  },
  methods: {
    pageChange(page) {
      this.pageNum = page;
      this.getListByPage();
    },
    // 优化数据
    embellishDate(text) {
      let _text = "-";
      if (text) {
        _text = text;
      }
      return _text;
    },
    // 列表编辑
    addTask(text, val) {
      console.log(val);
      this.$router.push({
        path: "/RecordList",
        query: {
          type: text,
          parentId: this.taskId,
          sektId: val.id,
          decompose: val.decompose //是否分解
        }
      });
    },
    setCheck(val) {
      // this.$router.push({
      //     path: "/RecordList",
      //     query: { type: text, parentId: this.taskId,id:val.id}
      //   });
    },
    setGrade(val) {
      console.log(val);
      for (const key in this.objCurr) {
        this.objCurr[key] = "";
      }
      this.objCurr.taskId = val.id;
      this.objCurr.type = true;
      this.dialogGrade = true;
    },
    // 点击列表打分确认按钮
    dataGrade() {
      // let _this = this.objCurr;
      // if (_this.year == "" || _this.time == "" || _this.score == "") {
      //   this.$message.error("请用户填填完输入框");
      //   return;
      // }
      // if (!/(^[1-9]\d*$)/.test(_this.score)) {
      //   this.$message.error("请用户在分数内写入1-100的正整数");
      //   return;
      // }
      // POST /taskScore/add
    },
    deleteRow(val) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post(`/deptTask/remove`, {
              id: val.id
            })
            .then(res => {
              if (res.code == 200) {
                console.log(res);
                this.$message({
                  message: "数据更新成功",
                  type: "success"
                });

                this.getListByPage();
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    dataTotal(val) {
      this.pageNum = val;
    },
    // 表格数组
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 列表查看按钮
    routerPath() {
      this.$router.push({
        path: "/taskScore",
        query: { taskId: this.$route.query.parentId }
      });
    },
    // 编写备注
    dataRemark() {
      this.dialogVisible = true;
    },
    // 获取数据列表
    getListByPage() {
      let _obj = {
        subtasksId: this.id
      };
      this.$axios
        .post(`/deptTask/getListByPage/${this.pageNum}/${this.pageSize}`, _obj, 2)
        .then(res => {
          if (res.code == 200) {
            console.log(res.data);
            this.tableData = res.data.list;
            this.total = res.data.total;
              this.tableData.forEach((item,index)=>{
                item.index = index+1
              })  
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style scoped>
.page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main {
  width: 100%;
  height: 100%;
}
.subnav {
  float: left;
  width: 100%;
  height: 60px;
  line-height: 60px;
}
.searchLeft {
  float: left;
  width: 400px;
  /* height: 40px; */
}
.searchLeft > button {
  width: 100px;
  height: 40px;
  background: #409eff;
  color: #fff;
  border: 0px;
  font-size: 16px;
  text-align: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  position: relative;
  left: -8px;
  top: 1px;
}
.searchRight {
  float: left;
  width: auto;
}
.searchRight > span {
  display: inline-block;
  width: 80px;
  height: auto;
  font-size: 14px;
  text-align: center;
  margin-left: 20px;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.page-component__scroll {
  height: 100%;
}
.list {
  width: 100%;
  height: 100%;
  padding-bottom: 60px;
}
.laypage {
  width: 100%;
  height: 60px;
  position: relative;
  top: -60px;
  text-align: right;
}
</style>
<style>
#taskScore .el-scrollbar__wrap {
  overflow: visible;
  overflow-y: scroll;
}
</style>
